import React, { useMemo } from 'react';
import { I18nextProvider } from 'react-i18next';
import { observer } from 'mobx-react-lite';
import { LocaleProvider } from '@douyinfe/semi-ui';
import zh_CN from '@douyinfe/semi-ui/lib/es/locale/source/zh_CN';
import en_GB from '@douyinfe/semi-ui/lib/es/locale/source/en_GB';
import { HashRouter } from 'react-router-dom';
import AuthRouter from './layout/AuthRouter';
import i18n from './locales';
import useLocale from './hooks/useLocale';

function App() {
  // 使用 useLocale hook 封装
  const [ locale ] = useLocale()

  // 获取 本地 Locale 数据
  const getLocale = useMemo(() => {
    if (locale === 'en') {
      return en_GB;
    } if (locale === 'zh') {
      return zh_CN;
    }
    return zh_CN;
  }, [locale]);

  return (
    <HashRouter>
      <LocaleProvider locale={getLocale}>
        <I18nextProvider i18n={i18n}>
          <AuthRouter/>
        </I18nextProvider>
      </LocaleProvider>
    </HashRouter>
  );
}

export default observer(App)
